<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/facelets/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    
    <ui:define name="content">
        <h:form id="registerForm">
            <p:panel header="Register" style="text-align: center;" >
                <p:spacer height="40"/>
                <h:panelGrid columns="3">
                    <h:outputText value="First Name:* "/>
                    <p:inputText id="txtfname" value="#{RegisterBackingBean.fname}">
                        <f:validateBean/>
                        <p:ajax event="blur" update="msg"/> 
                    </p:inputText>
                    <p:message id="msg" for="txtfname" display="icon"/>
                    
                    <h:outputText value="Last Name:* "/>
                    <p:inputText id="txtlname" value="#{RegisterBackingBean.lname}">
                        <f:validateBean/>
                        <p:ajax event="blur" update="msg2"/>
                    </p:inputText>
                    <p:message id="msg2" for="txtlname" display="icon"/>
                    
                    <h:outputText value="Email:* "/>
                    <p:inputText id="txtemail" value="#{RegisterBackingBean.email}">
                        <f:validateRegex pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"/>
                        <p:ajax event="blur" update="msg3"/> 
                    </p:inputText>
                    <p:message id="msg3" for="txtemail" display="icon"/>
                    
                    <h:outputText value="Phone Number:* "/>
                    <p:inputMask id="txtphone" value="#{RegisterBackingBean.phone}" mask="(999)-9999999"/>
                    <p:message for="txtphone" display="icon"/>
                    
                    <h:outputText value="Address :"/>
                    <p:inputText id="txtaddress" value="#{RegisterBackingBean.address}"/>
                    <p:message for="txtaddress" display="icon"/>
                    
                    <h:outputText value="Password:* "/>
                    <p:password id="txtpass" feedback="true" minLength="1" value="#{RegisterBackingBean.password}"/> 
                    <p:message for="txtpass" display="icon"/>
                    
                </h:panelGrid>
                <br/>
                <p:commandButton ajax="false" value="Register" actionListener="#{RegisterControllerBean.registerUser}" action="#{RegisterControllerBean.navigate}" update="msgs"/>
                <p:messages id="msgs" showDetail="true"/> 
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>